<template>
  <div id="myBarLineChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { get5yearsSituation } from '@/api/buildHouse.js';

const xAxisArr = ref([])
const newProjectArr = ref([])
const reinforceProjectNumArr = ref([])
onMounted(() => {
	get5yearsSituation().then((res) => {
		//console.log(res.data)
    xAxisArr.value = res.data.map(item=>{return item.years})
    newProjectArr.value = res.data.map(item=>{return item.newProjectNum})
    reinforceProjectNumArr.value = res.data.map(item=>{return item.reinforceProjectNum})
    // 需要获取到element,所以是onMounted的Hook
    let myChart = echarts.init(document.getElementById("myBarLineChart"));
    // 绘制图表
    myChart.setOption({
		  tooltip: {
//		    trigger: 'axis',
		    axisPointer: {
		      type: 'shadow'
		    }
		  },
		  legend: {
		  	top: 20,
        right: 20,
		  	textStyle: {
          color: "#fff",
          padding:[0,4]//文字与图形之间的左右间距
        },
        itemWidth: 8,    // 设置图例项的宽度为8像素
  			itemHeight: 8    // 设置图例项的高度为8像素
		  },
		  grid: {
		    left: '3%',
		    right: '7%',
		    bottom: '3%',
		    containLabel: true
		  },
		  xAxis: [
		    {
		    	name: '年',// 给X轴加单位
		      type: 'category',
		      nameTextStyle: {
		        color: "#fff",
		        padding: [0, 0, 0, -10],
		        fontSize: 14,
		      },
		      data: xAxisArr.value,
		      axisLabel: {
	          textStyle: {
	            color:' #fff',
	          },
	        },
		    },
		    {
          type: 'value',
          max: 5 * 100,
          show: false
        }
		  ],
		  yAxis: [
		    {
		      type: 'value',
		      name: '栋', // 纵坐标单位
		      nameTextStyle: {
            color: "#fff",
            fontSize: 14,
            nameLocation: "start",
          },
		      splitLine: {
            show: true,
            lineStyle: {
              color: ['#475ADB'],
              width: 1,
              type: 'dashed',
            },
         	},
		      //设置Y轴颜色
		      axisLabel: {
	          textStyle: {
	            color:' #fff',
	          },
	        },
		    }
		  ],
		  series: [
		    {
		      name: '新建工程',
		      type: 'bar',
		      emphasis: {
		        focus: 'series'
		      },
		      label: {
			      show: true, // 显示标签
			      position: 'top', // 标签显示位置
			      color: "#46FFFF",
			      fontSize: "14px",

			    },
		      itemStyle: {
		        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
							{ offset: 0, color: '#0775FE' },
							{ offset: 1, color: '#46FFFF' }
						]),
		      },
	       	barWidth: 10, // 设置柱状图宽度为30像素
		      data: newProjectArr.value
		    },
		    {
		      name: '加固工程',
		      type: 'bar',
		      emphasis: {
		        focus: 'series'
		      },
		      label: {
			      show: true, // 显示标签
			      position: 'top', // 标签显示位置
			      color: "#FFB35B"
			    },
		      itemStyle: {
		        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
							{ offset: 0, color: '#FF8A02' },
							{ offset: 0.5, color: '#FFB35B' },
							{ offset: 1, color: '#FFDEB8' }
						]),
		      },
	       	barWidth: 10 ,// 设置柱状图宽度为30像素
		      data: reinforceProjectNumArr.value
		    },

        {  
        	xAxisIndex: 1,
          data: [[42, newProjectArr.value[0]], [142, newProjectArr.value[1]], [242, newProjectArr.value[2]], [342, newProjectArr.value[3]], [442, newProjectArr.value[4]]],/* 这里要和第一组数据一样、才能保持在最高处*/
          type: 'line',
          symbol: 'circle',//拐点样式
          symbolSize: 7,//拐点大小
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2,//折线宽度
                color: "#0775FE"//折线颜色
              },
              color: '#46FFFF',//拐点颜色
              borderColor: '#fff',//拐点边框颜色
              borderWidth: 2//拐点边框大小
            },
            emphasis: {
              color: '#46FFFF'//hover拐点颜色定义
            }
          },
        },
        {
        	xAxisIndex: 1,
          data: [[58, reinforceProjectNumArr.value[0]], [158, reinforceProjectNumArr.value[1]], [258, reinforceProjectNumArr.value[2]], [358, reinforceProjectNumArr.value[3]], [458, reinforceProjectNumArr.value[4]]],/* 这里要和第一组数据一样、才能保持在最高处*/
          type: 'line',
          symbol: 'circle',//拐点样式
          symbolSize: 7,//拐点大小
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2,//折线宽度
                color: "#FF8B04"//折线颜色
              },
              color: '#FFFA6F',//拐点颜色
              borderColor: '#fff',//拐点边框颜色
              borderWidth: 2//拐点边框大小
            },
            emphasis: {
              color: '#FFFA6F'//hover拐点颜色定义
            }
          },
        }

		  ]
		});
    window.onresize = function () { // 自适应大小
      myChart.resize();
    };
  });  
})

</script>
<style lang='scss' scoped>
#myBarLineChart{
  width: 100%;
  height: 240px;
  margin: -20px auto 0;
  font-size: 14px;
}
</style>